<template>
	<view class="">
		<view class="container">
			<u-textarea v-model="content" placeholder="请输入你对该条发布的评价" :autoHeight="true" :maxlength="500"></u-textarea>
			<view class="image-container">
				<view class="image" v-for="(item,index) of fileList" :key="index">
					<image :src="item" mode="scaleToFill" style="width: 162rpx;height: 162rpx;"></image>
					<view class="eye">
						<u-icon name="eye-fill" size="40" @click="preview(item)"></u-icon>
					</view>
					<view class="close">
						<u-icon name="plus-circle" size="30" @click="delFile(index)"></u-icon>
					</view>
				</view>
				<view class="image">
					<view class="image-upload">
						<image src="/static/images/comment/image.png" mode="widthFix"
							style="width: 82rpx;height: 82rpx;" @click="upload"></image>
						<view class="">
							添加图片
						</view>
					</view>

				</view>
			</view>

		</view>
		<bottomComponent>
			<view class="bottom-btn" @click="submitHandler">
				确定
			</view>
		</bottomComponent>
	</view>

</template>

<script>
	import utils from "@/utils/common.js"
	import bottomComponent from "@/components/bottomComponent/index.vue"
	import {
		setComment
	} from "@/api/comment.js"
	export default {
		components: {
			bottomComponent
		},
		data() {
			return {
				content: '',
				fileList: [],
				id: ''
			}
		},
		onLoad(e) {
			const {
				id
			} = e
			if (id) {
				this.id = id
			}
		},
		methods: {
			submitHandler() {
				if (!this.content) {
					uni.showToast({
						title: "请输入评价内容",
						icon: "none"
					})
					return
				}
				setComment({
						comment_id: this.id,
						content: this.content,
						file: JSON.stringify(this.fileList),
						has_file: this.fileList.length?1:0,
					})
					.then(res => {
						uni.showToast({
							title: "评价成功",
							icon: "none",
							success: () => {
								setTimeout(() => {
									uni.navigateBack({
										delta: 1
									})
								}, 500)
							}
						})
					})
			},
			// 新增图片
			upload() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: async (res) => {
						console.log(res.tempFilePaths)
						const result = await utils.uploadFileToOss(res.tempFilePaths[0])
						this.fileList.push(result)
					}
				});
			},
			delFile(index) {
				this.fileList.splice(index, 1)
			},
			preview(url) {
				uni.previewImage({
					urls: [url]
				})
			}
		}

	}
</script>

<style>
	page {
		background: #649CF6 linear-gradient(360deg, #fff 0%, #ECF3FF 60%, #F1F6FF 96%, #F1F6FF 100%);
	}
</style>
<style scoped lang="scss">
	.container {
		margin: 10rpx auto;
		width: 729rpx;
		min-height: 612rpx;
		background-color: #fff;
		padding: 20rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.image-container {
			display: flex;
			flex-wrap: wrap;

			.image {
				position: relative;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
				border-radius: 8rpx;
				border: 2rpx dotted #4A84F4;
				text-align: center;
				font-weight: 500;
				font-size: 23rpx;
				color: #9C9C9C;
				line-height: 34rpx;
				overflow: hidden;

				.image-upload {
					padding: 20rpx 40rpx;
				}

				.eye {
					position: absolute;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					display: flex;
					align-items: center;
					justify-content: space-around;
				}

				.close {
					width: 200rpx;
					height: 46rpx;
					position: absolute;
					right: -82rpx;
					top: -4rpx;
					background-color: rgba(255, 255, 255, .6);
					display: flex;
					align-items: center;
					justify-content: space-around;
					transform: rotateZ(45deg);
				}
			}
		}
	}

	.bottom-btn {
		width: 630rpx;
		line-height: 86rpx;
		background: #2B5BF8;
		border-radius: 86rpx;
		font-weight: 500;
		font-size: 38rpx;
		color: #FFFFFF;
		text-align: center;
	}
</style>